<template>
	<div class="book-admin">
		<el-container>
			<!-- 导航栏 -->
			<el-header>图书后台管理系统</el-header>
			<el-container>
				<!-- 菜单栏 -->
				<el-aside width="200px">
					<el-menu :router='true'>
						<el-menu-item index='/adm'>首页</el-menu-item>
						<el-menu-item index='/adm/type'>类型管理</el-menu-item>
						<el-menu-item index='/adm/adm2'>商品管理</el-menu-item>
						<el-menu-item index='/adm/adm3'>热度图片</el-menu-item>
						<el-menu-item index="/adm/adm4">订单发货</el-menu-item>
						<el-menu-item index="/adm/adm5">用户列表</el-menu-item>
						<el-menu-item index="/adm/adm6">管理员添加</el-menu-item>
					</el-menu>
				</el-aside>
				<!-- 主体 -->
				<el-main><router-view></router-view></el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>

</script>



<style scoped>
/* 最大的容器 */
.book-admin {
	overflow: auto;
	width: 100%;
	height: 100%;
	display: flex;
}

/* 导航栏 */
.book-admin .el-header {
	width: 100%;
	line-height: 70px;
	background-color: deepskyblue;
	text-indent: 0.2em;
	color: white;
	font-weight: bold;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* 侧边栏 */
.book-admin .el-aside {
	color: #fff;
	text-align: center;
	line-height: 200px;
	height: 100%;
	background-color: #fff;
}

/* 主体 */
.book-admin .el-main {
	flex: 1;
	flex-direction: column;
}
</style>
